<template>
  <div>
    <el-form ref="skuForm" label-width="80px">
      <el-form-item label="SPU名称">{{ spuName }}</el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="SKU名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input
          placeholder="价格(元)"
          v-model="skuInfo.price"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input
          placeholder="重量(千克)"
          v-model="skuInfo.weight"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input
          placeholder="规格描述"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6 }"
          v-model="skuInfo.skuDesc"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item
            :label="attrValue.attrName"
            v-for="(attrValue, index) in attrValueList"
            :key="attrValue.id"
          >
            <el-select placeholder="请选择" v-model="attrValue.idAndvalueId">
              <el-option
                v-for="(attr, index) in attrValue.attrValueList"
                :key="attr.id"
                :label="attr.valueName"
                :value="`${attrValue.id}:${attr.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item
            v-for="saleAttr in saleAttrList"
            :label="saleAttr.saleAttrName"
            :key="saleAttr.id"
          >
            <el-select
              placeholder="请选择"
              v-model="saleAttr.saleAttrIdAndSaleId"
            >
              <el-option
                v-for="sale in saleAttr.spuSaleAttrValueList"
                :key="sale.id"
                :label="sale.saleAttrValueName"
                :value="`${saleAttr.id}:${sale.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          style="width: 100%"
          :data="imageList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="120"> </el-table-column>
          <el-table-column label="图片"
            ><template slot-scope="{ row, $index }"
              ><img
                :src="row.imgUrl"
                style="width: 100px; height: 100px" /></template
          ></el-table-column>
          <el-table-column label="名称"
            ><template slot-scope="{ row, $index }">{{
              row.imgName
            }}</template></el-table-column
          >
          <el-table-column label="操作"
            ><template slot-scope="{ row, $index }">
              <el-button
                type="primary"
                v-if="row.isDefault == 0"
                @click="defaultImage(row)"
                >设置默认</el-button
              ><el-button type="success" v-else>默认</el-button></template
            ></el-table-column
          >
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 已有的数据
      spuName: '',
      spuId: '',
      category3Id: 0,
      tmId: 0,
      skuInfo: {
        spuId: '',
        category3Id: 0,
        tmId: '',
        // id: 0,
        // isSale: 0,
        // 表单上收集的数据
        skuName: '',
        price: '',
        weight: '',
        skuDesc: '',
        skuDefaultImg: '',
        // 平台属性
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   attrName: 'string',
          //   id: 0,
          //   skuId: 0,
          //   valueId: 0,
          //   valueName: 'string'
          // }
        ],
        skuImageList: [
          // {
          //   id: 0,
          //   imgName: 'string',
          //   imgUrl: 'string',
          //   isDefault: 'string',
          //   skuId: 0,
          //   spuImgId: 0
          // }
        ],
        // 销售属性
        skuSaleAttrValueList: [
          // {
          //   id: 0,
          //   saleAttrId: 0,
          //   saleAttrName: 'string',
          //   saleAttrValueId: 0,
          //   saleAttrValueName: 'string',
          //   skuId: 0,
          //   spuId: 0
          // }
        ]
      },
      category1Id: '',
      category2Id: '',
      imageList: [],
      saleAttrList: [],
      attrValueList: [],
      // 搜集选中的图片数据
      checkedImageList: []
    }
  },
  methods: {
    // 获取页面需要的数据 在spu页面点击增加sku信息时触发
    async getData(category1Id, category2Id, spu) {
      this.category1Id = category1Id
      this.category2Id = category2Id
      this.spuId = spu.id
      this.spuName = spu.spuName
      this.category3Id = spu.category3Id
      this.tmId = spu.tmId
      // 获取图片数据
      const resultImage = await this.$api.spu.reqImageList(this.spuId)
      if (resultImage.code === 200) {
        const listImage = resultImage.data
        listImage.forEach((item) => {
          // 给图片添加设置默认值属性
          item.isDefault = 0
        })
        this.imageList = listImage
      }
      // 获取销售属性
      const resultSale = await this.$api.spu.reqSpuSaleAttrList(this.spuId)
      if (resultSale.code === 200) {
        this.saleAttrList = resultSale.data
      }
      // 获取商品基本属性
      const resultCategoryAttr = await this.$api.attr.reqAttrInfoList({
        category1Id: category1Id,
        category2Id: category2Id,
        category3Id: spu.category3Id
      })
      if (resultCategoryAttr.code === 200) {
        console.log(resultCategoryAttr)
        this.attrValueList = resultCategoryAttr.data
      }
    },
    // 图片列表选中
    handleSelectionChange(val) {
      this.checkedImageList = val
    },
    // 设置图片默认
    defaultImage(row) {
      this.imageList.forEach((item) => {
        item.isDefault = 0
      })
      row.isDefault = 1
      // 收集设置默认图片
      this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 整理收集的表单数据，发请求
    async save() {
      this.skuInfo.spuId = this.spuId
      this.skuInfo.category3Id = this.category3Id
      this.skuInfo.tmId = this.tmId
      //  整理平台属性的数据
      this.skuInfo.skuAttrValueList = this.attrValueList.reduce(
        (prev, item) => {
          if (item.idAndvalueId) {
            const [attrId, valueId] = item.idAndvalueId.split(':')
            prev.push({ attrId, valueId })
            return prev
          }
        },
        []
      )
      // 整理销售属性属性的数据
      this.skuInfo.skuSaleAttrValueList = this.saleAttrList.reduce(
        (prev, item) => {
          if (item.saleAttrIdAndSaleId) {
            const [saleAttrId, saleAttrValueId] =
              item.saleAttrIdAndSaleId.split(':')
            prev.push({ saleAttrId, saleAttrValueId })
            return prev
          }
        },
        []
      )
      // 整理图片属性
      this.skuInfo.skuImageList = this.checkedImageList.map((item) => {
        return {
          imgName: item.imgName,
          imgUrl: item.imgUrl,
          isDefault: item.isDefault,
          spuImgId: item.id
        }
      })
      const result = await this.$api.spu.reqSaveSkuInfo(this.skuInfo)
      // 请求成功返回0页面 数据清空
      if (result.code === 200) {
        // 切回主页面
        this.$emit('changeScene', 1)
        this.$message.success('添加成功')
        // 清空数据
        // Object.assign:es6中新增的方法可以合并对象
        // 组件实例this._data,可以操作data当中响应式数据
        // this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空的
        Object.assign(this._data, this.$options.data())
      } else {
        // 失败不动
        this.$message.error('添加失败')
      }
    },
    // 取消回到spu主页面
    cancel() {
      // 数据重置 未有数据
      // 切回主页面
      this.$emit('changeScene', 1)
      // 清空数据
      // Object.assign:es6中新增的方法可以合并对象
      // 组件实例this._data,可以操作data当中响应式数据
      // this.$options可以获取配置对象，配置对象的data函数执行，返回的响应式数据为空的
      Object.assign(this._data, this.$options.data())
    }
  }
}
</script>

<style>
</style>